<template>
   <div class="food">
       <ul>
           <li v-for="item in hotList" :key="item">
               {{item}}
           </li>
       </ul>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               hotList:[
                   '周边热点','自助餐','酒店',
                   '电影','火锅','KTV','运动健身',
                   '游泳','西餐','美容美体','日韩料理'
               ]
           }
       }
   }
</script>
   
<style scoped lang="less">
   .food{
       background: white;
       ul{
           display: flex;
           flex-wrap: wrap;/**自动换行 */
           li{
               width: 25%;
               list-style: none;/**去除列表标记项 */
               height: 1.066667rem;
               text-align: center;
               line-height: 1.066667rem;
               border-right: 1px solid #ddd8ce;
               border-bottom: 1px solid #ddd8ce;
               box-sizing: border-box;/**将盒模型设置为IE盒模型（此时border、padding都计算到宽高） */
               &:nth-of-type(1){
                   /*
                    CSS3伪类选择器：nth-of-type(1)、first-child、nth-child(1)
                    奇偶:nth-child(2n)偶数、nth-child(2n+1)奇数
                   */
                   color: #fdb338;
               }
           }
       }
   }
</style>